{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}举报管理{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between mb-3">
    <h5>举报总数: {{ report_count }} <span class="text-danger">(未处理: {{ unhandled_count }})</span></h5>
    <div>
        <form class="d-flex" method="get">
            <select name="is_handled" class="form-select" onchange="this.form.submit()">
                <option value="" {% if is_handled == '' %}selected{% endif %}>全部举报</option>
                <option value="false" {% if is_handled == 'false' %}selected{% endif %}>未处理</option>
                <option value="true" {% if is_handled == 'true' %}selected{% endif %}>已处理</option>
            </select>
        </form>
    </div>
</div>

<form id="batch-action-form" method="post" action="{% url 'adminuser:batch_handle_reports' %}">
    {% csrf_token %}
    <div class="mb-3">
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                批量操作
            </button>
            <ul class="dropdown-menu">
                <li><button type="submit" name="action" value="dismiss" class="dropdown-item">批量驳回举报</button></li>
                <li><button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#batchDeleteStoriesModal">批量删除故事</button></li>
            </ul>
        </div>
        <div class="btn-group ms-2">
            <button type="button" class="btn btn-outline-secondary" id="select-all-btn">全选</button>
            <button type="button" class="btn btn-outline-secondary" id="select-unhandled-btn">全选未处理</button>
            <button type="button" class="btn btn-outline-secondary" id="select-handled-btn">全选已处理</button>
            <button type="button" class="btn btn-outline-secondary" id="deselect-all-btn">取消全选</button>
        </div>
    </div>

<div class="card">
    <div class="card-header bg-light">
        <div class="row">
            <div class="col-md-1">选择</div>
            <div class="col-md-3">被举报故事</div>
            <div class="col-md-2">举报者</div>
            <div class="col-md-2">时间</div>
            <div class="col-md-2">状态</div>
            <div class="col-md-2">操作</div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush">
            {% for report in page_obj %}
            <div class="list-group-item">
                <div class="row align-items-center">
                    <div class="col-md-1">
                        <div class="form-check">
                            <input class="form-check-input report-checkbox" type="checkbox" 
                                  name="report_ids" value="{{ report.id }}" 
                                  id="report-{{ report.id }}"
                                  data-status="{% if report.is_handled %}handled{% else %}unhandled{% endif %}">
                            <label class="form-check-label" for="report-{{ report.id }}"></label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h6 class="mb-1">{{ report.story.title }}</h6>
                        <small class="text-muted">
                            作者: {{ report.story.author.username }} | 
                            举报类型: {{ report.get_report_type_display }}
                        </small>
                        <small class="d-block text-muted">
                            描述: {{ report.description|truncatechars:50 }}
                        </small>
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'adminuser:user_detail' user_id=report.reporter.id %}">
                            {{ report.reporter.username }}
                        </a>
                    </div>
                    <div class="col-md-2">
                        {{ report.created_at|date:"Y-m-d H:i" }}
                    </div>
                    <div class="col-md-2">
                        {% if report.is_handled %}
                        <span class="badge bg-success">已处理</span>
                        {% else %}
                        <span class="badge bg-danger">未处理</span>
                        {% endif %}
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'story:detail' pk=report.story.id %}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i> 查看故事
                        </a>
                        {% if not report.is_handled %}
                        <div class="btn-group mt-1">
                            <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#dismissReportModal{{ report.id }}">
                                <i class="bi bi-check"></i> 驳回
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteStoryModal{{ report.id }}">
                                <i class="bi bi-trash"></i> 删除故事
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- 驳回举报模态框 -->
            <div class="modal fade" id="dismissReportModal{{ report.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认驳回举报</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>您确定要驳回此举报吗？该故事将被保留。</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <form action="{% url 'adminuser:handle_report' report_id=report.id %}" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="dismiss">
                                <button type="submit" class="btn btn-success">确认驳回</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 删除故事模态框 -->
            <div class="modal fade" id="deleteStoryModal{{ report.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认删除故事</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>您确定要删除故事 "{{ report.story.title }}" 并处理此举报吗？该操作不可撤销。</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <form action="{% url 'adminuser:handle_report' report_id=report.id %}" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="delete_story">
                                <button type="submit" class="btn btn-danger">确认删除</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="list-group-item text-center">
                <p class="text-muted my-3">没有找到符合条件的举报</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="card-footer">
        <nav>
            <ul class="pagination justify-content-center mb-0">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if is_handled %}&is_handled={{ is_handled }}{% endif %}">首页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if is_handled %}&is_handled={{ is_handled }}{% endif %}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">首页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}
                
                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                </li>
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if is_handled %}&is_handled={{ is_handled }}{% endif %}">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if is_handled %}&is_handled={{ is_handled }}{% endif %}">末页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">末页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 批量删除故事模态框 -->
<div class="modal fade" id="batchDeleteStoriesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量删除故事</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要删除选中举报对应的故事吗？该操作不可撤销，并将同时处理对应的举报。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" name="action" value="delete_story" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 举报详情模态框 -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">举报详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <p class="fw-bold mb-1">举报ID:</p>
                        <p id="modal-report-id"></p>
                    </div>
                    <div class="col-md-4">
                        <p class="fw-bold mb-1">举报类型:</p>
                        <p id="modal-report-type"></p>
                    </div>
                    <div class="col-md-4">
                        <p class="fw-bold mb-1">状态:</p>
                        <p id="modal-report-status"></p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p class="fw-bold mb-1">举报者:</p>
                        <p id="modal-report-reporter"></p>
                    </div>
                    <div class="col-md-6">
                        <p class="fw-bold mb-1">举报时间:</p>
                        <p id="modal-report-date"></p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <p class="fw-bold mb-1">被举报内容:</p>
                        <p id="modal-report-item"></p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <p class="fw-bold mb-1">举报原因:</p>
                        <p id="modal-report-reason"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p class="fw-bold mb-1">详细描述:</p>
                        <p id="modal-report-content"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" id="handle-report-btn" class="btn btn-primary">处理举报</button>
            </div>
        </div>
    </div>
</div>
</form>

<!-- 添加JavaScript代码 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 全选按钮
    document.getElementById('select-all-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.report-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    });
    
    // 全选未处理按钮
    document.getElementById('select-unhandled-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.report-checkbox');
        checkboxes.forEach(checkbox => {
            if (checkbox.getAttribute('data-status') === 'unhandled') {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }
        });
    });
    
    // 全选已处理按钮
    document.getElementById('select-handled-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.report-checkbox');
        checkboxes.forEach(checkbox => {
            if (checkbox.getAttribute('data-status') === 'handled') {
                checkbox.checked = true;
            } else {
                checkbox.checked = false;
            }
        });
    });
    
    // 取消全选按钮
    document.getElementById('deselect-all-btn').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.report-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    });
    
    // 表单提交前验证
    document.getElementById('batch-action-form').addEventListener('submit', function(event) {
        const selectedReports = document.querySelectorAll('.report-checkbox:checked');
        if (selectedReports.length === 0) {
            event.preventDefault();
            alert('请至少选择一条举报进行操作');
            return false;
        }
        
        // 批量处理操作：检查是否包含已处理举报
        const action = event.submitter ? event.submitter.value : '';
        if (action === 'handle') {
            let hasHandled = false;
            selectedReports.forEach(checkbox => {
                if (checkbox.getAttribute('data-status') === 'handled') {
                    hasHandled = true;
                }
            });
            
            if (hasHandled) {
                if (!confirm('您选择了一些已处理的举报，它们将被跳过。是否继续？')) {
                    event.preventDefault();
                    return false;
                }
            }
        }
        
        return true;
    });
    
    // 处理查看报告详情
    document.querySelectorAll('.view-report-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const reportId = this.getAttribute('data-report-id');
            const reportType = this.getAttribute('data-report-type');
            const reportStatus = this.getAttribute('data-report-status') === 'True' ? '已处理' : '未处理';
            const reportReporter = this.getAttribute('data-report-reporter');
            const reportDate = this.getAttribute('data-report-date');
            const reportItem = this.getAttribute('data-report-item');
            const reportReason = this.getAttribute('data-report-reason');
            const reportContent = this.getAttribute('data-report-content');
            
            // 更新模态框内容
            document.getElementById('modal-report-id').textContent = reportId;
            document.getElementById('modal-report-type').textContent = reportType;
            document.getElementById('modal-report-status').textContent = reportStatus;
            document.getElementById('modal-report-reporter').textContent = reportReporter;
            document.getElementById('modal-report-date').textContent = reportDate;
            document.getElementById('modal-report-item').textContent = reportItem;
            document.getElementById('modal-report-reason').textContent = reportReason;
            document.getElementById('modal-report-content').textContent = reportContent;
            
            // 设置处理按钮的数据
            const handleBtn = document.getElementById('handle-report-btn');
            handleBtn.setAttribute('data-report-id', reportId);
            
            // 根据报告状态显示或隐藏处理按钮
            if (reportStatus === '已处理') {
                handleBtn.style.display = 'none';
            } else {
                handleBtn.style.display = 'block';
                handleBtn.addEventListener('click', function() {
                    window.location.href = `/adminuser/reports/handle/${reportId}/`;
                });
            }
            
            // 显示模态框
            const reportModal = new bootstrap.Modal(document.getElementById('reportModal'));
            reportModal.show();
        });
    });
});
</script>
{% endblock %} 